<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0,
           maximum-scale=1.0, minimum-scale=1.0"/>
    <title>angular价格运算</title>
</head>
<body>
    <div ng-app="myApp">
        <!-- 需要将获取值的代码编写在
         css布局之中,且需要通过controller-->
        <div ng-controller="fristController">
            <p>价格:<input type="text" ng-model="phone.money"/></p>
            <p>个数:<input type="text" ng-model="phone.num"/></p>
            <p>费用:<span>{{sum() | currency :'¥'}}</span></p>
            <p>运费:<span>{{phone.fre | currency :'¥'}}</span></p>
            <p>价格:<span>{{sum()+phone.fre | currency :'¥'}}</span></p>
        </div>
    </div>
</body>
<script src="js/angular.js"></script>
<script type="text/javascript">
    //先获取整个架构的对象
    var app=angular.module("myApp",[]);
    app.controller("fristController", function ($scope) {
        $scope.phone={money:5,num:1,fre:10}
        $scope.sum= function () {
            return $scope.phone.money*$scope.phone.num;
        }

        //采用watch来观察
        $scope.$watch($scope.sum, function (newValue,oldValue) {
            console.log(newValue);
            console.log(oldValue);
        })
    });

</script>
</html>